<template>
  <div class="user-profile">
    <!-- 头像部分 -->
    <div class="avatar-section">
      <div class="avatar-container">
        <img src="../assert/other/h1.png" alt="" class="avatar" />
        <div class="user-info">
          <h3>{{ user.name }}</h3>
          <p>{{ user.email }}</p>
        </div>
      </div>
    </div>

    <!-- 字体图标栏 -->
    <!-- <div class="icon-bar">
      <div class="icon-item" v-for="item in iconItems" :key="item.id" @click="handleIconClick(item.id)">
        <i :class="['icon', item.icon]"></i>
        <span>{{ item.label }}</span>
      </div>
    </div> -->

    <!-- 底部按钮 -->
    <div class="action-buttons">
      <button class="action-btn" @click="changePassword">
        <i class="icon-lock"></i> 修改密码
      </button>
      <button class="action-btn" @click="logout">
        <i class="icon-logout"></i> 退出登录
      </button>
      <button class="action-btn" @click="viewCodeRepo">
        <i class="icon-code"></i> 代码仓库
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'; // 新增路由引入
const router = useRouter(); // 获取路由实例

// 用户数据
const user = ref({
  name: '罗乐',
  email: '3050166029@qq.com',
  // avatar: ''
});



// 图标栏项目
// const iconItems = ref([
//   { id: 'history', icon: 'iconfont icon-history', label: '浏览历史' },
//   { id: 'like', icon: 'iconfont xihuan', label: '喜欢' },
//   { id: 'favorite', icon: 'iconfont icon-star', label: '收藏' },
//   { id: 'works', icon: 'iconfont icon-edit', label: '我的作品' }
// ]);

// 处理图标点击
const handleIconClick = (id) => {
  console.log(`点击了: ${id}`);
  // 这里可以添加导航逻辑或其他操作
};

// 修改密码
// const changePassword = () => {
//   router.push('/Login');
// };

// 退出登录
const logout = () => {
  router.push('/Login');
};

// 查看代码仓库
const viewCodeRepo = () => {
  console.log('查看代码仓库');
  window.open('https://gitee.com/ale2300298/vue', '_blank');
};
</script>

<style scoped>
.user-profile {
  height: 100vh;
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Arial', sans-serif;
  background-color: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.avatar-section {
  margin-bottom: 30px;
}

.avatar-container {
  display: flex;
  align-items: center;
  gap: 15px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.user-info h3 {
  margin: 0;
  color: #333;
}

.user-info p {
  margin: 5px 0 0;
  color: #666;
  font-size: 14px;
}

/* .icon-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-bottom: 30px;
  padding: 15px 0;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
}

.icon-item:hover {
  transform: translateY(-3px);
  color: #409eff;
}

.icon {
  font-size: 24px;
  margin-bottom: 5px;
} */

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.action-btn {
  padding: 12px;
  border: none;
  border-radius: 6px;
  background-color: #fff;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.action-btn:hover {
  background-color: #409eff;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
</style>